import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaLocaleProvider } from 'ecCom';

import './style';
import E9Header from './E9Header';
import E9NavMenu from './E9NavMenu';

const getLabel = WeaLocaleProvider.getLabel;

@inject('portalThemeStore')
@observer
class E9ThemeLayout2 extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { portalThemeStore, location } = this.props;
    const { pathname, query } = location;
    portalThemeStore.getTopMenu(pathname, query);
  }

  render() {
    const { portalThemeStore } = this.props;
    const { searchParams, themeInfo, frontEndMenu = [], translatepage } = portalThemeStore;
    const { hideHeader, hideAside } = searchParams;
    const { themeColorType } = themeInfo;
    const colorClassName = themeColorType ? `e9theme-color-${themeColorType}` : '';

    let navbartop = '';
    if (hideHeader == 'true') {
      navbartop = translatepage == '1' ? '30px' : '0px';
    } else {
      navbartop = translatepage == '1' ? '85px' : '55px';
    }

    let contenttop = '';
    if (hideHeader == 'true' && hideAside == 'true') {
      translatepage == '1' ? (contenttop = '30px') : (contenttop = '0px');
    } else if (hideHeader == 'true' && hideAside != 'true') {
      translatepage == '1' ? (contenttop = '85px') : (contenttop = '55px');
    } else if (hideHeader != 'true' && hideAside == 'true') {
      translatepage == '1' ? (contenttop = '85px') : (contenttop = '55px');
    } else {
      translatepage == '1' ? (contenttop = '140px') : (contenttop = '110px');
    }

    return (
      <div className={`e9theme-layout2-container ${colorClassName}`}>
        {translatepage == '1' ? (
          <div className="e9theme-translate">
            <div className="trans-tips">{getLabel(518684, '您已进入翻译模式，点击高亮显示的页面文字即可进行翻译')}</div>
            <div className="trans-exit" onClick={this.exitTranslatepage}>
              {getLabel(518685, '退出翻译模式')}
            </div>
          </div>
        ) : null}
        {hideHeader == 'true' ? null : (
          <div className="e9theme-layout2-header" style={translatepage == '1' ? { top: '30px' } : { top: '0px' }}>
            <E9Header ecId={`${(this && this.props && this.props.ecId) || ''}_E9Header@yunt21`} />
          </div>
        )}
        {hideAside == 'true' ? null : (
          <div className="e9theme-layout2-navbar" style={{ top: navbartop }}>
            {frontEndMenu && frontEndMenu.length > 0 && <E9NavMenu ecId={`${(this && this.props && this.props.ecId) || ''}_E9NavMenu@ibs085`} />}
          </div>
        )}
        <div className="e9theme-layout2-content" style={{ top: contenttop }}>
          <div id="themeLayoutMask" className="e9theme-layout2-mask" />
          <div className="e9theme-layout2-main" style={hideHeader == 'true' && hideAside == 'true' ? { padding: 0 } : {}}>
            <div id="themeLayoutRoute" className="e9theme-layout2-route">
              {this.props.children}
            </div>
            <div id="themeLayoutFrame" className="e9theme-layout2-frame">
              <iframe id="mainFrame" name="mainFrame" src="about:blank" />
            </div>
          </div>
        </div>
      </div>
    );
  }

  exitTranslatepage = () => {
    const { portalThemeStore } = this.props;
    portalThemeStore.setTranslatepage(0);
  };
}

export default E9ThemeLayout2;
